<template>
	<div class="xgplayer-container-warp" :class="{ center }">
		<!-- <div v-if="zhizhao" class="marsk"></div> -->
		<div ref="player" class="video-player" :id="idName"></div>
	</div>
</template>

<script>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
export default {
	name: 'xgplayer',
	props: {
		id: {
			type: String,
			default: function () {
				return 'video-player-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '');
			}
		},
		url: {
			// 传入的地址
			type: String,
			default: ''
		},
		center: {
			// 传入的地址
			type: Boolean,
			default: false
		},
		zhizhao: {
			// 传入的地址
			type: Boolean,
			default: false
		},
		pic: {
			// 传入的封面
			type: String,
			default: ''
		},
		scheduleNum: {
			// 传入的上次播放位置
			type: Number,
			default: 0
		}
	},

	data() {
		return {
			idName: this.id,
			playedTime: this.scheduleNum,
			currentTime: 0,
			maxTime: 0,
			player: null, //实例
			duration: 0
		};
	},
	created() {},
	mounted() {
		// 初始化播放器
		this.initPlayer();
	},
	watch: {
		url: {
			handler(newValue, oldValue) {
				if (!this.player) {
					this.initPlayer();
					return;
				}
				this.$set(this.player, 'src', this.url);
			}
		},
		scheduleNum: {
			handler(newValue, oldValue) {
				if (!this.player) {
					this.initPlayer();
					return;
				}
				this.player.startTime = (this.scheduleNum / 100) * this.duration;
			}
		}
	},

	methods: {
		stop() {
			if (this.player) this.player.pause();
		},
		// =========================1，设置播放器必要参数===================
		initPlayer() {
			if (!this.url) return console.warn('url is not esist');
			if (!this.$refs.player) return;
			const config = {
				id: this.idName,
				el: this.$refs.player,
				url: this.url,
				volume: 1, // 默认音量, 取值范围0 ~ 1
				fluid: true,
				// width: 226,
				// height: 120,
				controls: true,
				/**倍速播放 */
				playbackRate: [0.5, 0.75, 1, 1.5, 2],
				lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
				defaultPlaybackRate: 1, // 默认起播倍速，参考值0.5/0.75/1/1.5/2
				playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
				'x5-video-player-type': 'h5', // 微信内置浏览器设置，防止被浏览器劫持
				'x5-video-orientation': 'portraint',
				/**画中画 */
				pip: true,
				startTime: this.scheduleNum,
				poster: this.pic,
				// fitVideoSize: 'auto',
				// videoFillMode: 'auto',
				pipConfig: {
					bottom: 100,
					right: 100,
					width: 320,
					height: 180
				},
				// download: true,
				/**初始化首帧 */
				videoInit: true,
				autoplay: false
			};
			//========================== 2，开始实例化======================
			let player = null;
			try {
				player = new Player(config);
			} catch (e) {
				//TODO handle the exception
			}
			if (player) {
				this.player = player;
				/* 这里注册监听 */
				// 监听视频开始播放 播放传给父组件的是true
				this.player.on('play', () => {
					this.$emit('triggerEvent', true);
				});
				// 监听视频已经暂停 暂停传给父组件的是false
				this.player.on('pause', () => {
					this.$emit('triggerEvent', false);
				});
				// 监听 视频退出全屏
				// this.player.on('exitFullscreen', () => {
				//   window.scrollTo(0, 0);
				//   console.log('已经退出全屏了');
				// });
				// 监听播放器的时间更新事件
				this.player.on('timeupdate', () => {
					// 获取当前播放时间和视频总时长
					const currentTime = player.currentTime;
					const duration = player.duration;
					const percentage = (currentTime / duration) * 100;
					this.duration = duration;
					let num = parseFloat(percentage.toFixed(2));
					this.$emit('currentProgress', num);
					// localStorage.setItem('lastPlaybackTime', currentTime.toString());
				});
				// if (this.scheduleNum > 0) {
				// 将保存的播放时间转为数字类型，并确保其在视频时长范围内
				// const timeToSeek = Math.min(parseFloat(this.scheduleNum), player.duration);
				// console.log(timeToSeek);
				// 跳转到上次的播放时间
				// }
			}
		},
		// IOS设备设置，防止被浏览器劫持
		isAppleDevice() {
			const ua = navigator.userAgent.toLowerCase();
			return /iphone|ipad|phone|Mac/i.test(ua);
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.xgplayer-cssfullscreen {
	display: none;
}
.xgplayer-container-warp {
	position: relative;
	width: 100%;
	height: 100%;
}
// .marsk{
// 	z-index: 99999999999999999999999;
// 	width: 100%;
// 	height: 100%;
// 	background: transparent;
// }
.center {
	display: flex;
	align-items: center;
}
.video-player {
	position: relative;
	z-index: 1000000000000;
	width: 100%;
	height: 100%;
}
</style>
